<template>
  <tm-app>
    <tm-sheet color="#f5f6fa" :padding="[24, 24, 24, 0]">
      <tm-text color="primary" fontSize="24">{{
        $trans("pages.resetPsd.emailPlaceholder")
      }}</tm-text>
      <tm-input
        v-model="loginForm.email"
        :focusHighlight="false"
        placeholder=""
        color="transparent"
        inputPadding="0"
        focusFontColor="#000001"
        cursorColor="#000001"
        class="text-weight-bold"
      ></tm-input>
    </tm-sheet>

    <tm-row column="2" justify="space-between" class="px-24 mb-24">
      <tm-text color="error">{{
        $trans("pages.resetPsd.emailInvalidText")
      }}</tm-text>
      <tm-text color="primary" @click="tipModalShow = true">{{
        $trans("pages.resetPsd.receiveCodeText")
      }}</tm-text>
    </tm-row>

    <tm-sheet color="#f5f6fa" :padding="[24, 24, 24, 0]">
      <tm-text color="primary" fontSize="24">{{
        $trans("pages.resetPsd.validCode")
      }}</tm-text>
      <tm-input
        v-model="loginForm.validCode"
        :focusHighlight="false"
        placeholder=""
        color="transparent"
        inputPadding="0"
        focusFontColor="#000001"
        cursorColor="#000001"
        class="text-weight-bold"
      >
        <template v-slot:rightIcon>
          <tm-button color="primary" size="s">{{
            $trans("pages.resetPsd.validCodeSend")
          }}</tm-button>
        </template>
      </tm-input>
    </tm-sheet>

    <tm-sheet color="#f5f6fa" :padding="[24, 24, 24, 0]">
      <tm-text color="primary" fontSize="24">{{
        $trans("pages.resetPsd.passwordPlaceholder")
      }}</tm-text>
      <tm-input
        v-model="loginForm.password"
        :focusHighlight="false"
        :password="true"
        :showEye="true"
        placeholder=""
        color="transparent"
        inputPadding="0"
        focusFontColor="#000001"
        cursorColor="#000001"
        class="text-weight-bold"
      ></tm-input>
    </tm-sheet>

    <tm-text color="error" class="px-24 mb-24">{{
      $trans("pages.resetPsd.passwordInvalidText")
    }}</tm-text>

    <tm-sheet color="#f5f6fa" :padding="[24, 24, 24, 0]">
      <tm-text color="primary" fontSize="24">{{
        $trans("pages.resetPsd.passwordPlaceholder")
      }}</tm-text>
      <tm-input
        v-model="loginForm.confirmPassword"
        :focusHighlight="false"
        :password="true"
        :showEye="true"
        placeholder=""
        color="transparent"
        inputPadding="0"
        focusFontColor="#000001"
        cursorColor="#000001"
        class="text-weight-bold"
      ></tm-input>
    </tm-sheet>

    <tm-text color="error" class="px-24">{{
      $trans("pages.resetPsd.passwordInvalidText")
    }}</tm-text>

    <tm-row class="mx-20 mt-n15">
      <tm-button block round="50">{{
        $trans("pages.resetPsd.confirmButton")
      }}</tm-button>
    </tm-row>

    <tm-modal
      v-model:show="tipModalShow"
      :title="$trans('pages.resetPsd.receiveCodeText')"
      position="bottom"
      :show-footer="true"
      :overlayClick="false"
      contentPadding="0"
      height="auto"
    >
      <tm-sheet margin="0" :padding="[24, 0, 24, 24]" class="border-b-1">
        <tm-text color="#333" fontSize="26" class="mb-10">{{
          $trans("pages.resetPsd.receiveTipContent1")
        }}</tm-text>
        <tm-text color="#333" fontSize="26" class="mb-10">{{
          $trans("pages.resetPsd.receiveTipContent2")
        }}</tm-text>
        <tm-text color="#333" fontSize="26" class="mb-10">{{
          $trans("pages.resetPsd.receiveTipContent3")
        }}</tm-text>
        <tm-text color="#333" fontSize="26">{{
          $trans("pages.resetPsd.receiveTipContent4")
        }}</tm-text>
      </tm-sheet>
      <template #footer>
        <tm-button :block="true" skin="thin" @click="tipModalShow = false">{{
          $trans("pages.resetPsd.receiveTipOk")
        }}</tm-button>
      </template>
    </tm-modal>
  </tm-app>
</template>

<script lang="ts" setup>
const loginForm = reactive({
  email: "",
  validCode: "",
  password: "",
  confirmPassword: "",
})

const tipModalShow = ref(false)
</script>

<style lang="scss">
page {
  background-color: #fff;
}
</style>
